<template>
  <d2-container>
    <template slot="header">
      <el-form
        :inline="true"
        :model="queryForm"
        ref="queryForm"
        size="mini"
        style="margin-bottom: -18px;">

        <el-form-item label="客户编号" prop="customerSerialnumber">
          <el-input
            v-model="queryForm.params.customerSerialnumber"
            placeholder="客户编号"
            style="width: 100px;"
          />
        </el-form-item>

        <el-form-item label="客户名称" prop="customerName">
          <el-input v-model="queryForm.params.customerName" placeholder="客户名称" style="width: 100px;" />
        </el-form-item>

        <el-form-item v-if="!invoiceLogShow" label="开票状态" prop="hasInvoice">
          <el-select
            v-model="queryForm.params.hasInvoice"
            placeholder="开票状态"
            style="width: 100px;">
            <el-option v-for="(item, index) in queryForm.hasInvoiceList" :key="index" :label="item.name" :value="item.id"/>
          </el-select>
        </el-form-item>

        <el-form-item label="开始时间" prop="beginDate">
          <el-date-picker
            style="width: 140px"
            v-model="queryForm.params.beginDate"
            type="date"
            value-format="yyyy-MM-dd"
            placeholder="选择日">
          </el-date-picker>
        </el-form-item>

        <el-form-item label="结束时间" prop="endDate">
          <el-date-picker
            style="width: 140px"
            v-model="queryForm.params.endDate"
            type="date"
            value-format="yyyy-MM-dd"
            placeholder="选择日">
          </el-date-picker>
        </el-form-item>

        <el-form-item>
          <el-button
            type="primary"
            @click="handleFormSubmit">
            <d2-icon name="search"/>
            查询
          </el-button>
          <el-button
            v-if="!invoiceLogShow"
            type="primary"
            @click="checkInvoiceLog(true)">
            开票记录
          </el-button>
          <el-button
            v-if="invoiceLogShow"
            type="primary"
            @click="checkInvoiceLog(false)">
            返回
          </el-button>
        </el-form-item>

      </el-form>
    </template>
    <template>
      <d2-crud
        ref="d2Crud"
        :columns="invoiceLogShow ? columnsLog : columns"
        :data="data"
        :loading="loading"
        :pagination="pagination"
        @pagination-current-change="paginationCurrentChange"
        :form-options="formOptions">
      </d2-crud>
    </template>
  </d2-container>
</template>

<script>
export default {
  name: 'customer',
  data () {
    return {
      loading: false,
      invoiceLogShow: false,
      pagination: {
        currentPage: 1,
        pageSize: 5,
        total: 0
      },
      queryForm: {
        params: {
          hasInvoice: '', // 开票状态
          customerSerialnumber: '', // 客户编号
          customerName: '', // 客户名称
          beginDate: '', // 开始时间
          endDate: '' // 结束时间
        },
        hasInvoiceList: [
          {
            name: '未开',
            id: '0'
          },
          {
            name: '已开',
            id: '1'
          }
        ]
      },
      columns: [
        {
          title: '序号',
          key: 'serialNum',
          width: '60'
        },
        {
          title: '操作',
          key: 'hasInvoice',
          sortable: false,
          component: {
            render: (h, row, node, index) => {
              if (row.hasInvoice === '未开票') {
                return (
                  <span
                    onclick={() => {
                      this.invoice(row)
                    }}
                    style="cursor:pointer;color:#409EFF"
                  >
                    {row.hasInvoice}
                  </span>
                )
              } else {
                return (
                  <span>
                    {row.hasInvoice}
                  </span>
                )
              }
            }
          }
        },
        {
          title: '客户编号',
          key: 'customerSerialnumber',
          sortable: true
        },
        {
          title: '客户名称',
          key: 'customerName',
          sortable: true
        },
        {
          title: '支付方式',
          key: 'payway',
          sortable: true
        },
        {
          title: '金额',
          key: 'fee',
          sortable: true
        },
        {
          title: '时间',
          key: 'payTime',
          sortable: true
        },
        {
          title: '收据编码',
          key: 'receNumber',
          sortable: true
        },
        {
          title: '开票状态',
          key: 'hasInvoice',
          sortable: true
        }
      ],
      columnsLog: [
        {
          title: '序号',
          key: 'serialNum',
          width: '60'
        },
        {
          title: '客户编号',
          key: 'customerSerialnumber',
          sortable: true
        },
        {
          title: '客户名称',
          key: 'customerName',
          sortable: true
        },
        {
          title: '支付方式',
          key: 'payway',
          sortable: true
        },
        {
          title: '金额',
          key: 'fee',
          sortable: true
        },
        {
          title: '时间',
          key: 'payTime',
          sortable: true
        },
        {
          title: '收据编码',
          key: 'receNumber',
          sortable: true
        },
        {
          title: '开票状态',
          key: 'hasInvoice',
          sortable: true
        }
      ],
      data: [],
      formOptions: {
        labelWidth: '80px',
        labelPosition: 'left',
        saveLoading: false
      }
    }
  },
  mounted () {
    this.getPageList()
  },
  methods: {
    checkInvoiceLog (flag) {
      this.invoiceLogShow = flag
      this.pagination.currentPage = 1
      this.queryForm = {
        params: {
          hasInvoice: '', // 开票状态
          customerSerialnumber: '', // 客户编号
          customerName: '', // 客户名称
          beginDate: '', // 开始时间
          endDate: '' // 结束时间
        },
        hasInvoiceList: [
          {
            name: '未开',
            id: '0'
          },
          {
            name: '已开',
            id: '1'
          }
        ]
      }
      this.getPageList()
    },
    paginationCurrentChange (currentPage) {
      this.pagination.currentPage = currentPage
      this.getPageList()
    },
    // 开票
    async invoice (item) {
      const params = [item.id]
      this.$api
        .finance_invoice(params)
        .then(res => {
          this.$message.success('开票成功')
          this.getPageList()
        })
        .catch(err => {
          this.$message.success('开票失败')
          console.log('err', err)
        })
        .finally(() => {})
    },
    // 获取发票管理列表
    async getPageList () {
      const url = this.invoiceLogShow ? 'finance_getInvoicePageVO' : 'finance_getInvoiceRecordPageVO'
      const res = await this.$api[url]({
        pageNum: this.pagination.currentPage,
        pageSize: this.pagination.pageSize,
        ...this.queryForm.params
      })
      if (res && res.columns) {
        const { data } = res
        this.data = data
        this.pagination.total = res.total
        this.loading = false
      }
      return res
    },
    handleFormSubmit () {
      this.pagination.currentPage = 1
      this.getPageList()
    }
  }
}
</script>
